<template>
  <!-- 红包领取详情 -->
  <div class="redpacket-details">
    <div class="info-bg elevation"></div>
    <div class="backbar">
      <div class="back" @click="onBack">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div>
    <div class="sender flex-center column">
      <div class="head flex-center">
        <img :src="packet.headUrl" alt />
        <span class="ellipsis">{{ packet.nickname }} </span>
      </div>
      <div class="msg ellipsis" style="width: 80%;">{{ packet.remark }}</div>
      <div class="msg amount" v-if="gotAmount">{{ gotAmount }}</div>
    </div>
    <div class="gap"></div>
    <div class="detail-list-wrapper">
      <div class="detail-info">
        已领取 {{ detailList.length }} / {{ packet.number }}个 &nbsp;&nbsp;&nbsp;&nbsp; 共 {{ openedAmount }} / {{amount}}分
      </div>
      <ul class="detail-list flex-center column">
        <li class="list-item flexbox justify-space-between" v-for="(item, i) of detailList" :key="i">
          <div class="head flex-center">
            <img :src="item.headUrl" alt="">
          </div>
          <div class="info flexbox justify-around align-start column">
            <div class="nickname ellipsis">{{ item.nickname }}</div>
            <div class="time">
              {{ getListTime(item.createTime) }}
            </div>
          </div>
          <div class="amount">
            <span>{{ item.amount }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { Action, Mutation, Getter, namespace } from 'vuex-class';
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import MessageMixin from '@/mixins';
import { MsgTypeKV } from '@/api/socket/imClient';
import { Webim } from '@/utils/types';
import { getListTime } from '@/utils/common';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');
@Component<RedpacketDetail>({
  mixins: [MessageMixin],
})
export default class RedpacketDetail extends Vue {
  // 表示映射chat模块下的mutation方法

  private packet: any = {};

  private gotAmount: any = 0;

  @chatModule.State("groupSetting") groupSetting: any;
  private eventList: Array<string> = ["$getRedpacketDetail",]

  private amount: number = 0;
  private packetCount: string = '';

  private remark: string = '';

  private detailList: any = [];

  private openCount: number = 0;
  private allCount: number = 0;
  // 已领取的积分数
  private openedAmount: number = 0;

  protected mounted() {
    // console.error(this.list);

    this.initEvents(this.eventList);
    this.packet = this.$route.params;

    this.getRedpacketDetail();
  }

  private getListTime(time) {
    return getListTime(time);
  }

  /**
   * 
   */
  private getRedpacketDetail() {
    this.sendMessage(MsgTypeKV.getRedpacketDetail, {
      sendId: this.packet.sendId,
    });
  }

  private onBack() {
    this.sendMessage(MsgTypeKV.getPacketStatus, {
      sendId: this.packet.sendId,
    });
    this.$router.push({
      name: 'ChatPanel',
    })
    // this.$emit('hide');
  }

  /**
   * 获取到用户qrcode
   */
  private $getRedpacketDetail(data: any) {
    if (data.result === 0) {
      this.detailList = data.voList;
      // 自己抢到的数目
      // this.gotAmount = data.amount;
      let userId = localStorage.getItem('userId')
      this.openedAmount = 0;

      this.amount = data.amount;
      
      data.voList.forEach((item) => {
        this.openedAmount += item.amount;
        if (item.userId == userId) {
          this.gotAmount = item.amount;
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.info-bg
  width 600px
  height 600px
  border-radius 50% 
  background #03A9F4 
  position absolute
  left -3rem
  bottom 65%
  bottom 65%
  z-index -1
.redpacket-details
  width 100% 
  height 100% 
  position fixed 
  left 0 
  background #fff
  z-index 999
  .sender
    position relative
    height 30%
    .head 
      color #fae3b7
      font-size 18px
      img 
        width 30px 
        height 30px 
        border-radius 4px
        margin-right 12px 
    .msg 
      margin-top 20px
      color #fae3b7
      font-size 20px
      &.amount
        font-size 40px
        font-weight 500
  .open
    background #e6cea0
    width 100px 
    height 100px
    border-radius 50%
    position absolute 
    bottom -156px
    .open-image 
      width 60%
      height 60%
  .view-details
    position absolute 
    bottom -186px
    color #fae3b7
    font-size 14px
    span 
      display inline-block
      margin-right 12px
      position relative
      top 2px

.detail-list-wrapper
  width 100% 
  margin-top 10%
  .detail-info
    width 100% 
    height 36px
    line-height 36px
    text-align left
    padding-left 12px
    box-sizing border-box
    font-size 13px 
    color #909090
  .detail-list
    width 100% 
    background white
    border-bottom 0.8px solid #eee
    .list-item
      width 100% 
      height 56px 
      border-top 0.8px solid #eee 
      padding 0 6px
      box-sizing border-box
      .head 
        flex-basis 15% 
        width 15%
        img 
          width 36px
          height 36px
          border-radius 4px
      .info 
        flex-basis 70% 
        width 70%
        padding-left 20px 
        box-sizing border-box
        .nickname 
          font-size 16px 
          text-align left
        .time 
          font-size 11px 
          color #909090
      .amount 
        flex-basis 15% 
        width 15%
        font-size 16px
        padding-top 6px
        box-sizing border-box
.backbar
  color #fae3b7!important
  background transparent
.gap
  width 100% 
  height 14px
  background #f1f1f1
.elevation 
  box-shadow 0px 0px 5px 0.2px rgba(0, 0, 0, 0.34)
</style>

